<script setup>
import Sk from 'skulpt'

defineProps({
  msg: String,
})

function outf(text) {
  console.log(text);
}

function builtinRead(x) {
  if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined)
    throw "File not found: '" + x + "'";
  return Sk.builtinFiles["files"][x];
}

function runit() {
  var prog = document.getElementById("editor").value;
  console.log(prog.replace(/\n/g, "\\n"))
  Sk.pre = "output";
  Sk.configure({ output: outf, read: builtinRead });
  (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'mycanvas';
  var myPromise = Sk.misceval.asyncToPromise(function () {
    return Sk.importMainWithBody("<stdin>", false, prog, true);
  });
  myPromise.then(function (mod) {
    console.log('success');
  },
    function (err) {
      console.log(err.toString());
    });
}

</script>

<template>
  <textarea id="editor" cols="40" rows="20">import turtle
t = turtle.Turtle()
t.forward(100)
def pr():
    print("Hello World")
pr()
turtle.done()
  </textarea>
  <button @click="runit">运行</button>
  <div id="output">
    output:
  </div>
  <div id="mycanvas"></div>
</template>

<style scoped>
#editor {
  border: 1px solid black;
  background: radial-gradient(#9c27b0 0%, #9c27b0 47%, #ffeb3b 47.3%, #ffeb3b 100%);
}

#output {
  border: 1px solid black;
}

#mycanvas {
  width: 400px;
  height: 400px;
  border: 1px solid red;
}
</style>
